import React, { useEffect, useState } from "react";
import axios from "axios";
import like from "../resource/like.png";
import unlike from "../resource/unlike.png";
import message from "../resource/message.png";
import unmessage from "../resource/unmessage.png";
import star from "../resource/star.png";
import unstar from "../resource/unstar.png";
import "../pagesCss/HomePage.css";
import CommentSection from "../components/CommentSection.js";
import Login from "../components/Login.js";
import Cookies from "js-cookie";

function HomePage() {
  const [videoUrl, setVideoUrl] = useState("");
  const [liked, setLiked] = useState(false); // 添加 liked 状态
  const [starred, setStarred] = useState(false); // 添加 starred 状态
  const [showComments, setShowComments] = useState(false);
  const [showLogin, setShowLogin] = useState(false);

  useEffect(() => {
    axios
      .get("YOUR_BACKEND_API_URL")
      .then((response) => {
        setVideoUrl(response.data.videoUrl); // 假设后端返回的数据中包含视频URL
      })
      .catch((error) => {
        console.error("Error fetching video data:", error);
      });
  }, []);

  const handleLike = async () => {
    const token = Cookies.get("token");
    console.log("token:", token);
    try {
      if (liked) {
        const response = await axios.post(
          "http://localhost:8080/interaction/unlike",
          {
            params: {
              token: token,
              videoId: 1,
            },
          }
        );
        console.log("response:", response.data);
      } else {
        const response = await axios.post(
          "http://localhost:8080/interaction/like",
          {
            params: {
              videoId: 1,
              token: token,
            },
          }
        );
        console.log("response:", response.data);
      }
      setLiked(!liked); // 切换 liked 状态
    } catch (error) {
      console.error(error);
    }
  };

  const handleStar = async () => {
    const token = Cookies.get("token");
    console.log("token:", token);
    try {
      if (starred) {
        const response = await axios.post(
          "http://localhost:8080/interaction/uncollect",
          {
            params: {
              videoId: 1,
              token: token,
            },
          }
        );
        console.log("response:", response.data);
      } else {
        const response = await axios.post(
          "http://localhost:8080/interaction/collect",
          {
            params: {
              videoId: 1,
              token: token,
            },
          }
        );
        console.log("response:", response.data);
      }

      setStarred(!starred); // 切换 liked 状态
    } catch (error) {
      console.error(error);
    }
  };

  const handleMessage = () => {
    setShowComments(!showComments);
  };

  const handleLogin = () => {
    setShowLogin(true);
  };

  const closeLogin = () => {
    setShowLogin(false);
  };

  return (
    <div className="main-content">
      <header className="header">
        <input type="text" placeholder="搜索" className="search-bar" />
        <button className="login-button" onClick={handleLogin}>
          登录
        </button>
      </header>
      <div className="content-wrapper">
        <div className="video-section">
          <div className="video-wrapper">
            {videoUrl ? (
              <video src={videoUrl} controls className="video-player">
                您的浏览器不支持视频播放。
              </video>
            ) : (
              <div className="video-placeholder">视频内容区域</div>
            )}
            <div className="video-controls">
              <button onClick={handleLike}>
                <img
                  src={liked ? like : unlike}
                  alt="Heart"
                  className="control-icon"
                />
              </button>
              <button onClick={handleStar}>
                <img
                  src={starred ? star : unstar}
                  alt="Star"
                  className="control-icon"
                />
              </button>
              <button onClick={handleMessage}>
                <img src={message} alt="Message" className="control-icon" />
              </button>
            </div>
          </div>
        </div>
        {showComments && <CommentSection />}
        {showLogin && <Login closeLogin={closeLogin} />}
      </div>
    </div>
  );
}

export default HomePage;
